import A from "./Content"
import React from 'react'
import LifeCricle from "./LifeCricle"
import Modal from "./Modal组件"
import PortalCom from "./protalCom"
import Cal from "./stateUp/Cal"
import TemInput from "./stateUp/TemInput"
import List from "./列表"
import Control from "./受控组件"
import Zuhe from "./组合"
import NotControl from "./非受控组件"

// const element = <h1>你好，美国</h1>
let header = <h2>顶部</h2>
let main = <h3>主体</h3>
let footer = <h4>底部</h4>
// 创建一个无状态组件
// 一般情况下，我们把函数组件称之为无状态组件
// 一个函数组件需要，return结构出来，而所谓的结构就是react元素
class App extends React.Component{ //这是一个函数组件
  state={
    isShow:false
  }
  handleOk=()=>{
    this.setState({
      isShow:false
    })
  }
  handleCancel=()=>{
    this.setState({
      isShow:false
    })
  }
  handleClick=()=>{
    this.setState({
      isShow:true
    })
  }
  render(){ 
    return(
      <fieldset>
        <legend>App组件</legend>
      
        {/* <Zuhe header={header} main={main} footer={footer}> */}
        {/* </Zuhe> */}
        {/* <A/> */}
        {/* <PortalCom/> */}
        {/* 将各项数据传递过去 */}
        <Modal title='警告⚠' visible={this.state.isShow} onOk={this.handleOk} onCancel={this.handleCancel}>
        <h1>你确定购买这辆林肯吗</h1>  
        </Modal> 
        <button onClick={this.handleClick}>点击显示模态框</button>
        
      </fieldset>
    )
  }
 
}

export default App //导出这个组件